<template>
  <div class="container mx-auto">

      <NavWap  class="xl:hidden" @showBigSlideMenu="showBigSlideMenu"  />
      <NavPc  class="hidden xl:block" @showBigSlideMenu="showBigSlideMenu"  />
      
 
       <!-- pc web端 拉出左侧菜单 -->
       <SlideMenuBig  v-if="slideTpye == 'big'" @showBigSlideMenu="showBigSlideMenu"/>
 
  <div :class="pl" class="  pt-16  min-h-screen w-full"  >
     
  <!--
  This example requires Tailwind CSS v2.0+ 
  
  This example requires some changes to your config:
  
  ```
  // tailwind.config.js
  module.exports = {
    // ...
    plugins: [
      // ...
      require('@tailwindcss/forms'),
    ],
  }
  ```
-->
<div class="p-3">
  <div>
    

    <main class=" w-full">
      <div class="sm:flex sm:items-center sm:justify-between">
      <div class="card     side text-gray-300">
        <div class="flex-row items-center space-x-4 card-body">
          <div>
             <div   class="avatar" v-if="user.picture"><div class="rounded-full w-16 h-16 shadow ring ring-gray-700 " ><img id="user_picture" :src="user.picture"></div></div>
              <div  class="avatar placeholder" v-else><div class="bg-neutral-focus text-neutral-content rounded-full w-16 h-16" :style="'background-color:'+ user['icon:bgColor']"><span>{{user['icon:text']}}</span></div></div> 
              </div> <div><h2 class="card-title mb-0">{{user.username}}</h2> <p class="">{{user.aboutme}}</p>
            
          </div>
        </div>
       
      </div>
       <div v-if="isFollowing" @click="unfollow(user)" class="badge cursor-pointer badge-lg bg-gray-400 p-5 rounded-sm  w-full sm:w-auto"> Subscribe</div>
       <div v-else @click="follow(user)" class="badge cursor-pointer badge-lg bg-red-800 p-5 rounded-sm  w-full sm:w-auto"> Subscribe</div>
    </div>

      <section aria-labelledby="products-heading" class="pt-6 pb-24">
        
        <div class=" ">
          

          <!-- topics grid -->
           
            <div class="menu-box mb-4">
              <ul class="w-full menu items-stretch px-3 shadow-lg  horizontal rounded-box bg-gray-800 text-gray-300">
                <li class="">
                  <a  :href="'/uid/'+user.uid">
                      Topics  
                      </a>
                </li> 
                
                <li :class="type=='followers' ?'bordered':'' ">
                  <a :href="'/user/'+user.uid+'/followers'">
                        followers
                      </a>
                </li> 
                <li :class="type=='following' ?'bordered':'' ">
                  <a  :href="'/user/'+user.uid+'/following'"  >
                        following
                      </a>
                </li> 
                 
                
              </ul>
            </div>
            <!-- Replace with your content -->
               <div class="grid grid-cols-1 lg:grid-cols-4 gap-x-8 gap-y-10 ">
          <!-- Filters -->
         

          
          <!-- topics grid -->
          <div class="lg:col-span-3">
             
            <!-- Replace with your content -->
            <div  class="grid grid-cols-1 gap-4  m-4  sm:grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-3">
                <!-- <a  class="h-98 text-gray-300" v-for="(item,key) in list"  v-bind:key="key"  :href="'/topic/'+item.slug" >
      

                </a> -->
                <a v-for="(item,key) in list"  v-bind:key="key"  :href="'/uid/'+item.uid" class="card shadow-lg compact side text-gray-300"><div class="flex-row items-center space-x-4 card-body">
                    <div>
                       <div class="avatar" :href="'/uid/'+item.uid" v-if="item.picture"><div class="rounded-full w-10 h-10 shadow" ><img  :src="item.picture"></div></div>
                        <div class="avatar placeholder"  :href="'/uid/'+item.uid" v-else><div class="bg-neutral-focus text-neutral-content rounded-full w-10 h-10" :style="'background-color:'+ item['icon:bgColor']"><span>{{item['icon:text']}}</span></div></div> 
                     </div>
                    <div class="flex-1"><h2 class="card-title" v-html="item.username"></h2> <p class="truncate text-opacity-40" v-html="item.aboutme"></p></div> <div class="flex-0">
                        <a   v-on:click.stop.prevent="unfollow(item)" class="badge cursor-pointer bg-gray-400 btn-sm" v-if="type=='following'">Subscribe</a>
                        <a   v-on:click.stop.prevent="follow(item)" v-else class="badge cursor-pointer bg-red-800 btn-sm" >Subscribe</a>
                          
                    </div></div>
                </a>
            </div>
             <!-- recommend topics grid -->
           
            <!-- /End replace -->
          </div>
  <div class=" hidden rounded-box p-2 lg:block">             
            
            <!--  -->
            <h2 class="pb-3   border-b  border-gray-700 text-gray-300">About {{user.username}}</h2>
            <ul role="list" class="text-sm font-medium text-gray-300 space-y-4  m-3  ">
             <div class="text-gray-400  mb-3">fullname</div>
              <li>
                <span    >
                   {{user.fullname}}
                </span>
              </li>


             <div class="text-gray-400  mb-3">joined</div>
              <li>
                <span    >
                   {{user.joindate}}
                </span>
              </li>

               <div class="text-gray-400  mb-3">location</div>
              <li>
                <span    >
                   {{user.location}}
                </span>
              </li> 
            <div class="text-gray-400  mb-3">website</div>
              <li>
                <a  ref="nofollow" class=" cursor-pointer text-blue-400"   :href="user.website">
                  {{user.website}}
                </a>
              </li>
               <div class="text-gray-400  mb-3">Signature</div>
              <li>
                <span    >
                   {{user.signature}}
                </span>
              </li>
              
            </ul>
            
           
            </div>

         


      
        </div>
 
            <!-- /End replace -->
           
          <!-- recommend topics grid -->
         
        </div>
      </section>
    </main>
  </div>
</div>

</div>
</div>
</template>


<script>

export default {
  layout({req}){
    // //console.log("req.layout:",req.layout)
     return "web";
  },
  head() {
    return {
      title: this.meta.title,
      meta: [
         {
          name: 'keywords',
          content: this.meta.keywords,
        },
        {
          name: 'description',
          content:this.meta.description
        }
      ]
      }
    },
  name: 'IndexPage',
   data(){
    return { 
      isFollowing:false,
      showNothing:false,
      list:[],
      slideTpye:'small',
      user:{},
      pl:"pl-0" 

    }
  },
   async asyncData({req, params,$Data,error,$axios,route}) {
      let sid = req.sid;
      let sesData = await $Data.sesData(sid)
      let isFollowing =false;
      let uid = params.id;
      if(sesData.uid){
         isFollowing = await $Data.isFollowing(uid,sesData.sesUid);
      }
      let res = await $Data.getUser(uid);
      if(res.code>0){
        error({
            'statusCode': res.code,
            'message':res.code==404?"Page Not Found": JSON.stringify( res.msg),
        })
        return
      }
      let user = res.data;
      let type = params.type;
      if(type!="followers" && type!="following"){
             error({
                 'statusCode': 404,
                'message':"Page Not Found",
              })
              return;
      } 
      let meta = await $Data.getMeta(route.path,{subtitle:user.username});
       res = await  $axios.post('snogogo_nuxt/api/page',{slug:"user/"+user.username+"/"+type})
      // res = await  $axios.post('snogogo_nuxt/api/page/user',{slug:type})
      //console.log("params:",params,res)
      let users =[];
      if(res.code==0 && res.data.users){
        users =  res.data.users;
      }
      return { 
        user:user,
        isFollowing,
        list:users,
        type,
        meta
      }
   },
    async fetch({ store, params }) {
      // //console.log("store.state.user:",store)
      // await store.dispatch('GET_USER')
   },
  methods: {
    async getList(){
       //this.$tools.showToast('Loading...', 10000)
      let res = await  this.$axios.post('snogogo_nuxt/api/page/user',{slug:"topics"})
      //this.$tools.hideToast();
      if(res.code>0){
           var  message=res.code==404?"Page Not Found": JSON.stringify( res.msg);
           this.$tools.alert("error",message);
           return;
      }
      if(res.data.topics && res.data.topics.length>0){
          this.list = this.list.concat(res.data.topics)
      }
      if(this.list.length==0){
        this.showNothing=true;
      }
      
       
    },

    async unfollow(user){
        var d = confirm("Unsubscribe from "+user.username+"?");
        if(!d){
          return false;
        }
        //this.$tools.showToast('Loading...', 10000)
        // https://community.nodebb.org/api/v3/users/{uid}/follow
        let res = await  this.$axios.post('snogogo_nuxt/user/unfollow',{uid:user.uid})
        
        //this.$tools.hideToast();
        if(res.code>0){
            var  message=res.code==404?"Page Not Found": JSON.stringify( res.msg);
            this.$tools.alert("error",message);
           return false;
        }
        this.isFollowing = false;
        return false;
        
    },
    async follow(user){
        
        //this.$tools.showToast('Loading...', 10000)
        // https://community.nodebb.org/api/v3/users/{uid}/follow
        let res = await  this.$axios.post('snogogo_nuxt/user/follow',{uid:user.uid})
        
        //this.$tools.hideToast();
        if(res.code>0){
            var  message=res.code==404?"Page Not Found": JSON.stringify( res.msg);
            this.$tools.alert("error",message);
            return false;
        }
        this.isFollowing = true;
        return false;
    },
    // 左侧菜单显示
     showBigSlideMenu(){
        // //console.log("per:pl",this.pl,"slideTpye:",this.slideTpye)
        if(this.slideTpye=="small"){
          this.slideTpye="big";
          this.pl="pl-0 md:pl-60";
        }else{
          this.slideTpye="small";
          this.pl="pl-0";
        }
     }
   }
   
 
     

}
</script>
